import React, { useEffect } from 'react'

import { Route, Switch, useLocation } from 'react-router-dom'
import routers from '../routers'
import './view.scss'
// 路由过渡
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import Gotop from '../component/gotop'
import Footer from '../component/Footer'

const View = () => {
  const location = useLocation()
  useEffect(() => {
    if (location.hash == '#content') return
    ;(document.scrollingElement as any).scrollTop = 0
  }, [location.key])
  return (
    <div className="container">
      <TransitionGroup>
        <CSSTransition timeout={1000} classNames={'fade'} key={location.key}>
          <Switch location={location}>
            {routers.map(({ path, exact, component }) => (
              <Route
                key={path}
                path={path}
                exact={exact}
                component={component}
              />
            ))}
          </Switch>
        </CSSTransition>
      </TransitionGroup>
      <Gotop />
      <Footer />
    </div>
  )
}

export default View
